import React, {Component} from 'react';
// import {is} from 'immutable';
import Demo from '@/components/ImmutablePureRender/Demo';
import Input from '@/components/ImmutablePureRender/Input';

class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      inputValue: ''
    };
    this.fnChange = this.fnChange.bind(this);
  }
  shouldComponentUpdate (nextProps, nextState) {
    console.log(nextProps, nextState);
    return true;
  }
  // shouldComponentUpdate (nextProps, nextState) {
  //   const thisProps = this.props || {};
  //   const thisState = this.state || {};
  //   if (Object.keys(thisProps).length !== Object.keys(nextProps).length || Object.keys(thisState).length !== Object.keys(nextState).length) {
  //     return true;
  //   }
  //   for (const key in nextProps) {
  //     if (nextProps.hasOwnProperty(key) && !is(thisProps[key], nextProps[key])) {
  //       return true;
  //     }
  //   }
  //   for (const key in nextState) {
  //     if (nextState.hasOwnProperty(key) && !is(nextState[key], thisState[key])) {
  //       return true;
  //     }
  //   }
  //   return false;
  // }
  fnChange (e) {
    this.setState({
      inputValue: e.target.value
    });
  }
  render () {
    return (
      <div>
        <h2>Immutable 和 PureRender</h2>
        <input type="text" value={this.state.valueInput} onChange={this.fnChange}/>
        <Demo order={1}></Demo>
        <Demo order={2}></Demo>
        <Demo order={3}></Demo>
        <Demo order={4}></Demo>
        <Input order={5}></Input>
      </div>
    )
  }
}

export default App;
